<template>
  <div class="home">
    <van-search
      class="del"
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      @click="tiaozhuan"
    />
    <br />
    <br />
    <br />
    <br />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in banners" :key="item._id">
        <img :src="item.coverImg" alt="" />
      </van-swipe-item>
    </van-swipe>

    <van-divider>热销商品</van-divider>
    <!-- 上拉加载更多 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="sp"
        v-for="item in products"
        :key="item._id"
        @click="tiao(item._id)"
      >
        <img :src="item.coverImg" alt="" />
        <p>{{ item.name }}</p>
        <p class="item">￥{{ item.price }}</p>
      </div>

      <!-- <div v-for="item in products" :key="item._id">
        <van-card
          :price="item.price"
          :desc="item.name"
          :thumb="item.coverImg"
        />
      </div> -->
    </van-list>
  </div>
</template>

<script>
import { reqBannersAPI, reqProductsAPI } from '../api/product'
// import { Toast } from "vant";
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      value: '',
      banners: [],
      products: [],
      loading: false, //用于控制加载...
      finished: false, //如果没有数据了，就不能下拉加载请求接口了
      page: 1, // 分页
    }
  },
  computed: {},
  watch: {},
  methods: {
    tiaozhuan() {
      this.$router.push({
        name: "Search",
      });
    },
    //获取轮播图
    async getBanners() {
      const result = await reqBannersAPI()
      console.log(result)
      this.banners = result.products
    },
    //获取商品列表
    async getProducts() {
      this.loading = true //调用接口loading显示
      const result = await reqProductsAPI({ page: this.page })
      this.loading = false //接口数据获取成功之后loading消失
      this.products = [...this.products, ...result.products] //把新数据和老数据进行合并
      if (result.products.length < 10) {
        this.finished = true // 如果这个参数是true说明已经不能再请求数据
      } else {
        this.page++ //如果还有数据页码+1
      }
      console.log(this.products)
    },
    //点击跳详情
    tiao(id) {
      // this.$router.push("/detail?id=" + id);

      // query既可以和path配合使用，也可以和name配合使用，刷新参数不丢失
      this.$router.push({
        path: '/detail',
        query: {
          id,
        },
      })
    },
    // 上拉到底部会自动触发,默认会执行一次
    onLoad() {
      this.getProducts()
    },
  },

  created() {
    //调用获取轮播图
    this.getBanners()
  },
  mounted() {},
}
</script>
<style scoped>
.van-swipe-item img {
  width: 100%;
  height: 200px;
  display: block;
}
/* .product {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
} */
.sp img {
  width: 100%;

}

.van-list {
  padding-bottom: 50px;
}
.van-list .sp {
  width: 45%;
  height: 240px;
  /* border: 1px solid #000; */
  float: left;
  margin: 2.5%;
  border-radius: 10px;
  box-shadow: 0px 0px 4px #7d7b7b;
  position: relative;
}
.item {
  color: rgb(247, 38, 38);
  position: absolute;
  bottom: 0;
  left: 45px;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
}
.del {
  position: fixed;
  z-index: 1;
  width: 100vw;
}
</style>
